<template>
  <div class="advisory-notice-search-container w-full h-[100px] flex items-center justify-center">
    <div class="advisory-notice-search-input flex items-center">
      <input v-model="searchInput" type="text" class="search w-[570px] h-[40px] text-[14px]" :placeholder="t('breadCrumb.advisoryNotice.placeholderText')">
      <el-button type="primary" size="large" class="search-btn" @click="handleSearch">
        {{ t('breadCrumb.advisoryNotice.search') }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['search'])
const { t } = useI18n()
const searchInput = ref('')
const handleSearch = () => {
  emit('search', searchInput.value)
}
</script>

<style lang="scss" scoped>
.advisory-notice-search-container {
    // background: linear-gradient(90deg, #C2DBFF 0%, #CDD6EA 100%);
    background: url("@/assets/images/searchBar.png"),
    linear-gradient(90deg, #C2DBFF 0%, #CDD6EA 100%);
    background-size: 1920px 100px,100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    // &::before{
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     width: 50%;
    //     height: 100%;
    //     background: #C2DBFF;

    // }
    // &::after{
    //     content: '';
    //     position: absolute;
    //     right: 0;
    //     top: 0;
    //     width: 50%;
    //     height: 100%;

    //     background: #CDD6EA;
    // }
}
.search{
    border: 1px solid #126EDF;
    border-right: none;
    border-radius: 4px 0 0 4px;
    text-indent: 10px;
    &:focus{
        outline: none;
    }
}
.search::placeholder {
  font-size: 14px; /* 控制 placeholder 的字体大小 */
}
.search-btn{
    border-radius: 0 4px 4px 0;
}
</style>
